<template>
    <div class="sign-up-info">
        <div class="search-content"></div>
        <div class="search-list">
            <el-table :data="signUpInfoList" border :height="oHeight" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" prop="userName" label="店铺名称" min-width="120"></el-table-column>
                <el-table-column align="center" prop="userPhone" label="店主用户名" min-width="120"></el-table-column>
                <el-table-column align="center" label="所属等级" prop="orderSerialNumber" min-width="120">
                    <template slot-scope="scope">
                        {{ storeLevel(scope.row.orderSerialNumber) }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="groupCategory" label="有效期至" min-width="90">
                    <template slot-scope="scope">
                        <span>{{ scope.row.groupCategory | dateFormatter('YYYY-MM-DD ') }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="状态" min-width="120">
                    <template slot-scope="scope">
                        <!-- <span>{{scope.row.channel}}</span> -->
                        {{ computedCheckStatus(scope.row.signUpTime) }}
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <el-button type="primary" @click="handleShopDel">删除店铺</el-button>
                    <el-button type="primary" @click="handleShopAdd">提交店铺1</el-button>
                    <el-button type="primary" @click="showStoreBox = true">添加店铺</el-button>
                </div>
                <div class="paginationOne"></div>
            </div>
        </div>
        <store-list :showStoreBox.sync="showStoreBox" @chooseStore="getStoreInfo" :chooseAll="true"></store-list>
    </div>
</template>
<script>
import storeList from "@/components/home/store-list.vue";
import { resize } from "@/common/js/height.js";
export default {
    name: "group-edit",
    data() {
        return {
            oHeight: 600,
            params: {},
            searchContent: {
                groupName: '',
                userName: '',
                userPhone: '',
                payStatus: '',
                signUpChannel: '',
                addTime: '',
                employeeName: ''
            },
            signUpInfoList: [],
            addInfoList: [],
            total: 0,
            showStoreBox: false,
            check: [],
            ids: []
        }
    },
    components: { storeList },
    methods: {
        getStoreInfo(store) {
            this.addInfoList = store && store.map(function (item) {
                return {
                    id: item.storeId,
                    userName: item.storeName,
                    userPhone: item.storeUserName,
                    orderSerialNumber: item.storeLevel,
                    groupName: item.store_end_time * 1000,
                    signUpTime: item.storeStatus
                }
            });
            this.signUpInfoList = this.signUpInfoList.concat(this.addInfoList);
        },
        storeLevel(level) {
            switch (level) {
                case '1':
                    return "默认店铺";
                case '2':
                    return "白金店铺";
                default:
                    return "默认店铺";
            }
        },
        handleShopDel(item) {
            for (let i = 0; i < this.check.length; i++) {
                for (let j = 0; j < this.signUpInfoList.length; j++) {
                    if (this.check[i].id == this.signUpInfoList[j].id) {
                        this.signUpInfoList.splice(j, 1)
                    }
                }
            }
        },
        handleShopAdd(item) {console.log(this.check.length, 'this.check.length')
            if (this.check.length <= 0) {
                return this.$message.warn('请选中需要提交的店铺')
            }
            var pc_store_ids = "";
            for (let i = 0; i < this.check.length; i++) {
                if (i < this.check.length - 1) {
                    pc_store_ids += this.check[i].id + ",";
                } else {
                    pc_store_ids += this.check[i].id;
                }
            }
            const data = {};
            data.project_id = this.params.id;
            data.form_submit = "ok";
            data.pc_store_ids = pc_store_ids;
            let url = '/admin/platform_coupon/index.php?act=platform_coupon&op=edit_project_store'
            if (this.params.type == 2) {
                url = '/admin/platform_coupon/index.php?act=platform_coupon&op=edit_project_store' // 发放
            }
            this.$http.post(url, data).then(res => {
                if (res.code == 1) {
                    this.$parent.tabLists = [
                        { "label": "项目券列表", "name": 'group-management' },
                        { "label": "发放列表", "name": 'sign-up-info' },
                        { "label": "项目券分类", "name": 'group-category' },
                        { "label": "发放导入", "name": 'group-detail' }
                    ]
                    // this.$router.go(-1)
                } else {
                    alert(res.msg)
                }
            })
        },
        handleSelectionChange(check) {
            this.check = check;
        },
        computedCheckStatus(code) {
            switch (code * 1) {
                case 1:
                    return '开启';
                case 3:
                    return '已过期';
                case 2:
                    return '关闭';
                case 4:
                    return '已失效';
                case 5:
                    return '未激活';
                case 9:
                    return '9';
                case 11:
                    return '11';
                case 12:
                    return '22';
                case 999:
                    return '999';
            }
        },
        search() {
            this.searchContent.currentPage = 1;
            this.getListData();
        },
        handleSizeChange(pageSize) {
            this.searchContent.pageSize = pageSize;
            this.searchContent.currentPage = 1;
            this.getListData();
        },
        handleCurrentChange(page) {
            this.searchContent.currentPage = page;
            this.getListData();
        },
        getListData() {
            const data = {};
            data.project_id = this.params.id;
            let url = '/admin/platform_coupon/index.php?act=platform_coupon&op=edit_project_store'
            if (this.params.type == 2) {
                url = '/admin/platform_coupon/index.php?act=platform_coupon&op=edit_project_store' // 发放
            }
            this.$http.post(url, data).then(res => {
                if (res.code == 1) {
                    if (res.data && res.data.store_list) {
                        this.signUpInfoList = res.data.store_list.map(function (item) {
                            return {
                                id: item.store_id,
                                userName: item.store_name,
                                userPhone: item.member_name,
                                orderSerialNumber: item.grade_name,
                                groupName: item.store_end_time * 1000,
                                signUpTime: item.store_state,
                            }
                        });
                        this.total = parseInt(res.data.TotalNum);
                        this.channelList = res.data.class_list;
                    } else {
                        this.signUpInfoList = [];
                        this.total = 0;
                    }
                }
                else if (res.code == 2001) {
                    this.signUpInfoList = [];
                    this.total = 0;
                }
                else {
                    alert(res.msg);
                }
            })
        }
    },
    mounted() {
        resize(this)
    },
    created() {
        // if (this.$parent.tabLists[1] && this.$parent.tabLists[1].label == "审核" && this.$parent.tabLists[1].name == "group-detail") {
        // 	this.$parent.tabLists.splice(1, 1);
        // }
        
        this.params = this.$route.query
        const title = +this.params.type === 1 ? '使用店铺' : '发放店铺'
        this.$parent.tabLists = [
            { "label": "项目券列表", "name": 'group-management' },
            { "label": "发放列表", "name": 'sign-up-info' },
            { "label": "项目券分类", "name": 'group-category' },
            { "label": "发放导入", "name": 'group-detail' },
            { "label": title, "name": 'group-edit' }
        ]
        this.getListData()
    }
}
</script>
<style lang="scss" scoped>
.sign-up-info {
    .search-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        &-input {
            width: 200px;
        }

        .time-range-wrapper {
            .time-range-label {
                font-size: 14px;
            }

            display: flex;
            align-items: center;

            /deep/.el-range-separator {
                box-sizing: content-box;
            }
        }
    }

    .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.btn-bottom {
    background: #409EFF;
    color: #fff;
    border: 0;
    font-size: 14px;
    padding: 5px 8px;
    border-radius: 3px;
    display: inline-block;
}
</style>